<template>
  <view class="editPersonContainer">
    <uni-forms :modelValue="formData" :rules="rules" validateTrigger="bind">
      <uni-forms-item label="学/工号:">
        <uni-easyinput type="text" :value="formData.userId" disabled="true" />
      </uni-forms-item>
      <uni-forms-item label="姓名:">
        <uni-easyinput type="text" :value="formData.userName" disabled="true" />
      </uni-forms-item>
      <uni-forms-item label="身份:">
        <uni-easyinput type="text" :value="formData.userIdentity == '1'? '老师': '学生'" disabled></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="性别:">
        <uni-easyinput type="text" :value="formData.userGender == '1'? '男':'女'" disabled></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item required label="密码:" name="userPassword">
        <uni-easyinput type="password" v-model="formData.userPassword" primaryColor="#ff84b4"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item required label="手机号:" name="userMobile">
        <uni-easyinput type="number" v-model="formData.userMobile" primaryColor="#ff84b4"></uni-easyinput>
      </uni-forms-item>


    </uni-forms>
    <view class="btnEditZone">
      <wyb-button class="btn" width="620rpx" type="filled" color="#ff84b4" :radius="['40px']" @click="editInformation">
        修改资料
      </wyb-button>
    </view>
  </view>
</template>


<script>
  export default {
    onShow() {
      console.log("打开");
      this.getPersonData();
    },
    data() {
      return {
        formData: {
          userId: '',
          userName: '',
          userIdentity: '',
          userGender: '',
          userPassword: '',
          userMobile: '',
          userIdentityNumber: ''
        },
        // 表单验证
        rules: {
          userPassword: {
            rules: [{
                required: true,
                errorMessage: '请填写密码'
              },
              {
                minLength: 3,
                maxLength: 20,
                errorMessage: '密码长度应该在 3 到 20 个字符之间'
              }
            ]
          },
          userMobile: {
            rules: [{
                required: true,
                errorMessage: '请填写手机号',
              },
              {
                minLength: 11,
                maxLength: 11,
                errorMessage: '手机号应该在11位'
              }
            ]
          }
        }
      }
    },
    methods: {
      // 获取数据
      getPersonData(){
        this.$http.get('/api/user/getUserData').then((res) => {
          if (res.data.code == 200){
            this.formData.userId = res.data.data.userId;
            this.formData.userName = res.data.data.userName;
            this.formData.userIdentity = res.data.data.userIdentity;
            this.formData.userIdentityNumber = res.data.data.userIdentityNumber;
            this.formData.userMobile = res.data.data.userMobile;
            this.formData.userGender = res.data.data.userGender;
            this.formData.userPassword = res.data.data.userPassword;
          }else {
            uni.showToast({
              title: '数据加载失败，请稍后重试',
              icon: 'none',
              duration: 2000
            })
          }
          console.log("formData");
          console.log(this.formData);
        });
      },
      // 修改信息
      editInformation() {
        this.$http.post('/api/user/update',{
         userId: this.formData.userId,
         userMobile: this.formData.userMobile,
         userPassword: this.formData.userPassword
        }).then((res) => {
          if(res.data.code == 200){
            // 提示信息
            uni.showToast({
              title: '修改成功',
              duration: 2000
            });
            setTimeout(function() {
              uni.navigateBack();
            }, 2300);
          }else{
            uni.showToast({
              title: '修改失败请稍后重试',
              icon: 'none',
              duration: 2000
            })
          }
        })
      }
    },
    onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
      console.log(option.userId); //打印出上个页面传递的参数。
    }

  }
</script>

<style>
  .editPersonContainer {
    padding: 50rpx 50rpx;
  }

  .editPersonContainer .btnEditZone {
    padding: 0rpx 25rpx;
  }
</style>
